<template>
  <div id="Enrich" class="mainpage">
    <!-- 面包导航开始 -->
    <el-row style="margin: 15px">
      <div class="breadcrumb">
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="14">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="(item, j) in paths"
              :key="j"
              >{{ item.hit }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </el-col>
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
      </div>
    </el-row>
    <!-- 面包导航结束 -->
    <!-- 内容主体 -->
    <el-row :gutter="10">
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
      <el-col
        :xs="24"
        :sm="22"
        :md="20"
        :lg="18"
        :xl="14"
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
      >
        <!-- 在此嵌入组件 -->
        <el-row :gutter="10">
          <el-col :span="22" :offset="1">
            <!-- 说明文字开始 -->
            <el-row :gutter="10" style="margin: 20px">
              <span
                class="demonstration"
                style="
                  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
                    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
                    sans-serif;
                  font-size: 18px;
                  font-color: blue;
                "
                >请选择数据</span
              >
            </el-row>
            <!-- 说明文字结束 -->
            <!-- 选择框开始 -->
            <el-form ref="form">
              <el-divider></el-divider>
              <b-container>
                <el-form-item label="选择需要上传的文件">
                  <b-row>
                    <b-col>
                      <el-upload
                        class="upload-demo"
                        action="http://localhost:8222/metaboservice/enrichbygfj/upload"
                        :multiple="false"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :on-exceed="handleExceed"
                        :on-success="handleSuccess"
                        :file-list="fileList"
                        :limit="1"
                        accept=".xlsx"
                      >
                        <el-button size="small" type="primary"
                          >点击上传</el-button
                        >
                      </el-upload>
                    </b-col>
                  </b-row>
                </el-form-item>
                <el-form-item label="使用我们的示例">
                  <b-row>
                    <b-col>
                      <el-button
                        style="margin-left: 10px"
                        size="small"
                        type="info"
                        @click="importExample"
                        >example</el-button
                      >
                    </b-col>
                  </b-row>
                </el-form-item>
              </b-container>
              <el-divider></el-divider>
            </el-form>
            <!-- 选择框结束 -->
            <el-row>
              <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11">
                <div class="grid-content unseealbe-content"></div>
              </el-col>
              <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <el-button
                  plain
                  style="margin: 10px"
                  @click="cuculateByGfjAlgo()"
                  v-loading.fullscreen.lock="fullscreenLoading"
                  >提交</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 嵌入组件结束 -->
      </el-col>
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
    </el-row>
    <!-- 内容主体结束 -->
  </div>
</template>

<script>
import algo from "@/api/algo";
export default {
  data() {
    return {
      paths: [
        { path: "/", hit: "首页" },
        { path: "/algo", hit: "分析算法" },
        { path: "/algo/enrich-gfj/enrich-input", hit: "富集分析输入" },
      ],
      fileList: [

      ],
      fullscreenLoading: false,
    };
  },
  created() {},
  methods: {
    handleRemove(file, fileList) {
      fileList = [];
    },
    handlePreview(file) {
      window.open(file.response.data.data.url);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(res, file, fileList) {
      if (res.code == "20000") {
        this.$message.success("上传成功");
        this.fileList = fileList;
      } else {
        this.$message.error("上传失败");
      }
    },
    importExample() {
      this.fileList = [
        {
          name: "example",
          response: {
            data: {
              data: {
                url: "http://localhost:8005/example.xlsx",
                realUrl: "example",
              },
            },
          },
        },
      ];
    },
    cuculateByGfjAlgo() {
      if (this.fileList[0] == null) {
        this.$message({
          message: "还没有进行上传",
          type: "warning",
        });
      } else {
        this.fullscreenLoading = true;
        algo
          .cuculateByGfjAlgo(this.fileList[0].response.data.data.realUrl)
          .then((response) => {
            this.fullscreenLoading = false;
            this.$router.push({ name: "algo-enrich-gfj-enrich-graph" });
          });
      }
    },
  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
}

.el-row {
  min-height: 30px;
}

.unseealbe-content {
  background: #ffffff;
}

.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

.mainpage {
  margin-bottom: 0px;
  min-height: 800px;
}
</style>